<template>
  <Head title="" isBack>
    <template #content>
      <div class="dispute-info">
        <div class="info">
          <div>
            <div class="info-item">
              <div class="dispute-title">企业名称</div>
              <div class="dispute-value">
                {{ data.detailData.operatorName }}
              </div>
            </div>
            <div class="info-item info-item1">
              <div class="dispute-title">上传对账单</div>
              <div class="dispute-value">{{ data.detailData.fileName }}</div>
              <el-form
                ref="recRuleFormRef1"
                :model="reRuleForm1"
                :rules="reRules1"
                label-width="10px"
                class="edit-form-wrap"
              >
                <el-form-item label="" prop="file" style="margin-bottom: 0">
                  <el-button
                    v-if="!data.reconciliation"
                    class="dispute-upload"
                    type="primary"
                    plain
                    v-btnAntiShake="onUpload"
                  >
                    重新上传
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="info-item" v-if="data.reconciliation">
            <div class="dispute-title">对账周期</div>
            <div class="dispute-value">
              {{ `${data.detailData.startDate} ~ ${data.detailData.endDate}` }}
            </div>
          </div>
          <div class="info-item" v-if="!data.reconciliation">
            <el-form
              ref="recRuleFormRef"
              :model="reRuleForm"
              :rules="reRules"
              label-width="140px"
              class="edit-form-wrap"
            >
              <el-form-item
                label="对账周期"
                prop="resultPayTime"
                class="has-tips"
              >
                <div class="edit-date-wrap">
                  <el-date-picker
                    v-model="reRuleForm.resultPayTime"
                    popper-class="qc-date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </div>
                <div class="tip">
                  <div class="icon"></div>
                  平台获取该时间范围内启动充电/支付的订单与互联互通方进行对账，单次对账不超过一年的时间跨度
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div>
          <div class="card-edit" v-if="data.reconciliation" @click="editSms">
            <div class="iconfont icon-bianji">重新对账</div>
          </div>
          <div class="card-save" v-else>
            <div
              class="iconfont icon-cuowuguanbiquxiao-xianxingyuankuang"
              @click="editCancle"
            >
              取消
            </div>
            <div class="iconfont icon-baocun" v-btnAntiShake="reSubmit">
              保存
            </div>
          </div>
        </div>
        <el-dialog
          v-model="data.fileDialogVisible"
          title="上传对账单"
          width="430"
          class="qc-custom-dialog import-dialog"
        >
          <el-form
            ref="dialogFormRef"
            :model="dialogForm"
            :rules="dialogRules"
            label-width="90px"
            class="dialog-form-wrap"
          >
            <el-form-item label="上传对账单" prop="file">
              <div class="iconfont icon-download" @click="downloadTemplate">
                下载对账模板
              </div>
              <el-upload
                ref="uploadRef"
                class="upload-demo"
                drag
                action="#"
                :auto-upload="true"
                :http-request="uploadFile"
                :before-upload="beforeAvatarUpload"
                :on-remove="onRemove"
                :limit="1"
                :on-exceed="handleExceed"
                accept=".xlsx,.xls"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  将文件拖至此处或点击此处上传
                  <div>支持格式：.xlsx,.xls</div>
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="hideDialog">取消</el-button>
              <el-button type="primary" @click="submitDialog"> 提交 </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <el-tabs
        v-model="data.activeTab"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="争议账单" name="station">
          <Table
            ref="tableStationRef"
            v-show="data.activeTab === 'station'"
            :query="data.query"
            :toolbar="data.toolbar"
            :handles="data.handles"
            @get-list="getData"
            :content="true"
          >
            <template #content>
              <el-table ref="table" :data="data.dataList" style="width: 100%">
                <template #empty>
                  <div class="no-data-wrap">
                    <div class="no-data"></div>
                    <div class="text">暂无数据</div>
                  </div>
                </template>
                <el-table-column
                  width="60"
                  type="index"
                  label="序号"
                  align="center"
                  :index="indexMethod"
                />
                <el-table-column
                  prop="flowStartChargeSeq"
                  label="互联互通流水号"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.flowStartChargeSeq || '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="stationName"
                  label="电站名称"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.stationName || '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="connectorId"
                  label="终端编码"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.connectorId || '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startChargeSeq"
                  label="平台订单号"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    <div
                      style="color: #5073f7; cursor: pointer"
                      v-if="scope.row.startChargeSeqStatus == 3"
                      @click="linkToOrder(scope.row.startChargeSeq)"
                    >
                      {{ scope.row.startChargeSeq || '--' }}
                    </div>
                    <div v-else>{{ scope.row.startChargeSeq || '--' }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startChargeSeqStatus"
                  label="订单状态"
                  width="150"
                  align="center"
                  :formatter="statusFormat"
                />
                <el-table-column
                  prop="payTime"
                  label="订单支付时间"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.payTime || '--' }}
                  </template>
                </el-table-column>
                <el-table-column label="订单金额（元）" align="center">
                  <el-table-column
                    prop="amount"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.amount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowAmount"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowAmount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="resultAmount"
                    label="处理结果"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.resultAmount || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="电量（度）" align="center">
                  <el-table-column
                    prop="power"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.power || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowPower"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowPower || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="resultPower"
                    label="处理结果"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.resultPower || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="电费（元）" align="center">
                  <el-table-column
                    prop="powerAmount"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.powerAmount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowPowerAmount"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowPowerAmount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="resultPowerAmount"
                    label="处理结果"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.resultPowerAmount || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="服务费（元）" align="center">
                  <el-table-column
                    prop="serviceAmount"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.serviceAmount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowServiceAmount"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowServiceAmount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="resultServiceAmount"
                    label="处理结果"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.resultServiceAmount || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="争议类型"
                  width="150"
                  align="center"
                  :formatter="typeFormat"
                />
                <el-table-column
                  prop="result"
                  label="状态"
                  width="150"
                  align="center"
                  :formatter="resultFormat"
                />
                <el-table-column
                  v-if="btnObj.list && btnObj.list.length > 0"
                  label="操作"
                  fixed="right"
                  align="center"
                  :width="btnWidth"
                >
                  <template #default="scope">
                    <div class="table-btn-wrap">
                      <div
                        class="table-btn"
                        v-for="(btn, index) in data.handles"
                        :key="index"
                        @click="btn.handle(scope.row)"
                      >
                        {{ btn.label }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </Table>
          <!-- 弹窗开始 -->
          <el-dialog
            v-model="data.dialogVisible"
            title="处理争议订单"
            width="520"
            class="qc-custom-dialog edit-page-wrap"
          >
            <div class="dialog-tip">请录入互联互通争议订单的结算依据。</div>
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="100px"
              class="dialog-form-wrap edit-form-wrap"
            >
              <el-form-item label="订单金额" prop="resultAmount">
                <el-input
                  v-model.trim="ruleForm.resultAmount"
                  placeholder="请输入订单金额"
                  maxlength="9"
                  clearable
                />
              </el-form-item>
              <el-form-item label="电量" prop="resultPower">
                <el-input
                  v-model.trim="ruleForm.resultPower"
                  placeholder="请输入电量"
                  maxlength="9"
                  clearable
                />
              </el-form-item>
              <el-form-item label="电费" prop="resultPowerAmount">
                <el-input
                  v-model.trim="ruleForm.resultPowerAmount"
                  placeholder="请输入电费"
                  maxlength="9"
                  clearable
                />
              </el-form-item>
              <el-form-item label="服务费" prop="resultServiceAmount">
                <el-input
                  v-model.trim="ruleForm.resultServiceAmount"
                  placeholder="请输入服务费"
                  maxlength="9"
                  clearable
                />
              </el-form-item>
              <el-form-item label="订单支付时间" prop="resultPayTime">
                <el-date-picker
                  v-model="ruleForm.resultPayTime"
                  popper-class="qc-date"
                  type="datetime"
                  placeholder="请选择时间"
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="hide">取消</el-button>
                <el-button type="primary" v-btnAntiShake="onSubmit">
                  确认
                </el-button>
              </span>
            </template>
          </el-dialog>
          <!-- 弹窗结束 -->
        </el-tab-pane>
        <el-tab-pane label="平账账单" name="order">
          <Table
            ref="tableRef"
            v-if="data.activeTab === 'order'"
            :query="orderData.query"
            :toolbar="orderData.toolbar"
            @get-list="getOrderData"
            :content="true"
          >
            <template #content>
              <el-table
                ref="table"
                :data="orderData.dataList"
                style="width: 100%"
              >
                <template #empty>
                  <div class="no-data-wrap">
                    <div class="no-data"></div>
                    <div class="text">暂无数据</div>
                  </div>
                </template>
                <el-table-column
                  width="60"
                  type="index"
                  label="序号"
                  align="center"
                  :index="indexMethod"
                />
                <el-table-column
                  prop="flowStartChargeSeq"
                  label="互联互通流水号"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.flowStartChargeSeq || '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="stationName"
                  label="电站名称"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.stationName || '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="connectorId"
                  label="终端编码"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.connectorId || '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startChargeSeq"
                  label="平台订单号"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    <div
                      style="color: #5073f7; cursor: pointer"
                      v-if="scope.row.startChargeSeqStatus == 3"
                      @click="linkToOrder(scope.row.startChargeSeq)"
                    >
                      {{ scope.row.startChargeSeq || '--' }}
                    </div>
                    <div v-else>{{ scope.row.startChargeSeq || '--' }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="startChargeSeqStatus"
                  label="订单状态"
                  width="150"
                  align="center"
                  :formatter="statusFormat"
                />
                <el-table-column
                  prop="payTime"
                  label="订单支付时间"
                  width="150"
                  align="center"
                >
                  <template #default="scope">
                    {{ scope.row.payTime || '--' }}
                  </template>
                </el-table-column>
                <el-table-column label="订单金额（元）" align="center">
                  <el-table-column
                    prop="amount"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.amount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowAmount"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowAmount || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="电量（度）" align="center">
                  <el-table-column
                    prop="power"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.power || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowPower"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowPower || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="电费（元）" align="center">
                  <el-table-column
                    prop="powerAmount"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.powerAmount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowPowerAmount"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowPowerAmount || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="服务费（元）" align="center">
                  <el-table-column
                    prop="serviceAmount"
                    label="平台"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.serviceAmount || '--' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="flowServiceAmount"
                    label="互联互通方"
                    align="center"
                    width="130"
                  >
                    <template #default="scope">
                      {{ scope.row.flowServiceAmount || '--' }}
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </template>
          </Table>
        </el-tab-pane>
      </el-tabs>
    </template>
  </Head>
</template>
      
<script lang="ts" setup name="disputeOrderDetail">
import type { FormRules, FormInstance, UploadProps } from 'element-plus';
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import { getFileType } from '@/components/qcUpload/index';
import {
  reconcilQueryDetailPage,
  reconcilHandleDetail,
  reconciliationOrderInfo,
  EXPORT_RECONCILDETAILORDER,
  URL_RECONDOWNLOADS,
  reconciliationUpdate,
} from '@/service/apis/financial';
import { exportFile, findKeyByValue } from '@/utils/utils';
import { queryDicByParent } from '@/service/apis/api';
import { bntAuth, getDay } from '@/utils/utils';
import { ElMessageBox } from 'element-plus';
import { IS_NUM_MORE0, IS_DECIMAL_4, IS_TWO_DECIMAL } from '@/utils/verify';

const router = useRouter();
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const recRuleFormRef = ref<FormInstance>();
const recRuleFormRef1 = ref<FormInstance>();
const dialogFormRef = ref<FormInstance>();

const {
  query: { id },
} = route;

const tableRef = ref();
const tableStationRef = ref();
const page = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const btnObj = reactive({
  list: [] as any,
});

let optionsS = reactive({
  typeData: [] as any,
  resultData: [] as any,
  startChargeSeqStatusData: [] as any,
});

const ruleForm = reactive({
  id: null,
  resultPower: null as any,
  resultAmount: null as any,
  resultPowerAmount: null as any,
  resultServiceAmount: null as any,
  resultPayTime: '',
});

const rules = reactive<FormRules>({
  resultAmount: [
    { required: true, message: '请输入订单金额', trigger: 'blur' },
    {
      pattern: IS_TWO_DECIMAL,
      message: '请输入正确的订单金额(精确到2位小数)',
      trigger: 'blur',
    },
  ],
  resultPower: [
    { required: true, message: '请输入电量', trigger: 'blur' },
    {
      pattern: IS_DECIMAL_4,
      message: '请输入正确的电量(精确到4位小数)',
      trigger: 'blur',
    },
  ],
  resultPowerAmount: [
    { required: true, message: '请输入电费', trigger: 'blur' },
    {
      pattern: IS_TWO_DECIMAL,
      message: '请输入正确的电费(精确到2位小数)',
      trigger: 'blur',
    },
  ],
  resultServiceAmount: [
    { required: true, message: '请输入服务费', trigger: 'blur' },
    {
      pattern: IS_TWO_DECIMAL,
      message: '请输入正确的服务费(精确到2位小数)',
      trigger: 'blur',
    },
  ],
  resultPayTime: [
    { required: true, message: '请选择订单支付时间', trigger: 'change' },
  ],
});

const data = reactive({
  reconciliation: true,
  dialogVisible: false,
  fileDialogVisible: false,
  dialogData: [] as any,
  corporateIdentityData: [] as any,
  dataList: [] as any,
  detailData: {} as any,
  order: {} as any,
  todayData: {} as any,
  activeTab: 'station',
  formData: {} as any,
  type: 1,
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_RECONCILDETAILORDER,
          '争议账单',
          tableStationRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '互联互通流水号',
      prop: 'flowStartChargeSeq',
      comName: 'input',
      props: {
        placeholder: '请输入互联互通流水号',
      },
    },
    {
      label: '争议类型',
      prop: 'recStatus',
      comName: 'select',
      props: {
        placeholder: '请选择争议类型',
        options: [] as any,
      },
    },
    {
      label: '争议状态',
      prop: 'recResult',
      comName: 'select',
      props: {
        placeholder: '请选择争议状态',
        options: [] as any,
      },
    },
  ],
  handles: [
    {
      label: '处理',
      permission: 'interconnectionReconciliationList.handle',
      handle: (row: any) => {
        ruleFormRef.value?.clearValidate();
        data.dialogVisible = true;
        data.dialogData = row;
        ruleForm.resultPower = row.resultPower;
        ruleForm.resultAmount = row.resultAmount;
        ruleForm.resultPowerAmount = row.resultPowerAmount;
        ruleForm.resultServiceAmount = row.resultServiceAmount;
        ruleForm.id = row.id;
        ruleForm.resultPayTime = row.resultPayTime;
      },
    },
  ],
});
const orderData = reactive({
  dataList: [] as any,
  columns: [
    {
      prop: 'type',
      label: '企业身份',
      dic: [] as any,
    },
    {
      prop: 'orgName',
      label: '互联互通流水号',
    },
    {
      prop: 'channelName',
      label: '电站名称',
    },
    {
      prop: 'channelName',
      label: '终端编码',
    },
    {
      prop: 'totalElecMoney',
      label: '平台订单号',
    },
    {
      prop: 'totalElecMoney',
      label: '订单支付时间',
    },
    {
      prop: 'totalAmount',
      label: '订单金额（元）',
    },
    {
      prop: 'totalPower',
      label: '充电电量（度）',
    },
    {
      prop: 'totalElecMoney',
      label: '电费（元）',
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费（元）',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'interconnectionReconciliationList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_RECONCILDETAILORDER,
          '平账账单',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '互联互通流水号',
      prop: 'flowStartChargeSeq',
      comName: 'input',
      props: {
        placeholder: '请输入互联互通流水号',
      },
    },
  ],
});

// 数据切换
const handleClickTab = (e: any) => {
  console.log(e.props.name);
  if (e.props.name === 'station') {
    data.type = 1;
    tableStationRef.value?.handleQuery();
  } else {
    data.type = 0;
    tableRef.value?.handleQuery();
  }
};

// 操作栏宽度
let btnWidth = ref(30);
data.handles?.forEach((item: any, inx: number) => {
  if (bntAuth(item.permission)) {
    btnWidth.value += item.label.length * 12 + 6;
    btnObj.list.push(item);
  }
});

// 争议类型
const typeFormat = (row: any, column: any) => {
  return findKeyByValue(optionsS.typeData, row.type);
};

// 对账状态
const resultFormat = (row: any, column: any) => {
  return findKeyByValue(optionsS.resultData, row.result);
};

// 订单状态
const statusFormat = (row: any, column: any) => {
  return findKeyByValue(
    optionsS.startChargeSeqStatusData,
    row.startChargeSeqStatus
  );
};

const linkToOrder = (orderId: any) => {
  if (orderId) {
    router.push({
      path: `/historicalOrderDetail`,
      query: { startChargeSeq: orderId },
    });
  }
};

// 序号
const indexMethod = (index: number) => {
  return index + 1;
};

const checkFile = (rule: any, value: any, callback: any) => {
  if (value.length == 0) {
    callback(new Error('请上传文件'));
  }
  callback();
};

let dialogForm = reactive({
  file: [] as any,
});
const dialogRules = reactive<FormRules>({
  file: [
    { required: true, message: '请上传文件', trigger: 'change' },
    { validator: checkFile, trigger: 'change' },
  ],
});

const uploadRef = ref();
// 重新上传
const onUpload = () => {
  data.fileDialogVisible = true;
};

// 下载模板
const downloadTemplate = () => {
  const url = URL_RECONDOWNLOADS;
  const a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('download', '');
  a.click(); // 自执行点击事件
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
  return getFileType(rawFile, 'xlsx').then((fileType) => {
    // 校验上传类型
    if (!fileType) {
      ElMessageBox.alert('请导入xlsx、xls格式的文件！', '提示', {
        confirmButtonText: '确认',
        type: 'warning',
      });
      return false;
    }
    return true;
  });
};
const onRemove: UploadProps['onRemove'] = () => {
  dialogForm.file = [];
};
const uploadFile = (data: any) => {
  return new Promise((resolve, reject) => {
    dialogForm.file = [data!.file];
    dialogFormRef?.value?.clearValidate();
  });
};

const handleExceed: UploadProps['onExceed'] = () => {
  ElMessageBox.alert('最多可以上传1个文件', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
  });
};

// 上传账单取消按钮
const hideDialog = () => {
  data.fileDialogVisible = false;
};
// 上传账单确定按钮
const submitDialog = async () => {
  if (!dialogFormRef.value) return;
  const formData = new FormData();
  formData.append('file', dialogForm.file[0]);
  console.log('formData');

  await dialogFormRef?.value.validate((valid: any, fields: any) => {
    if (valid) {
      reRuleForm1.file = dialogForm.file;
      data.fileDialogVisible = false;
      recRuleFormRef1?.value?.clearValidate();
    }
  });
};

const reRuleForm = reactive({
  id: null,
  startDate: '',
  endDate: '',
  resultPayTime: [] as any,
});

const reRules = reactive<FormRules>({
  resultPayTime: [
    { required: true, message: '请选择对账周期', trigger: 'change' },
  ],
});

const reRuleForm1 = reactive({
  file: [] as any,
});

const reRules1 = reactive<FormRules>({
  file: [{ required: true, message: '请重新上传对账单', trigger: 'change' }],
});

// 重新对账
const editSms = () => {
  data.reconciliation = false;
  reRuleForm.resultPayTime = [
    data.detailData.startDate,
    data.detailData.endDate,
  ];
};
// 取消按钮
const editCancle = () => {
  uploadRef.value?.clearFiles();
  recRuleFormRef1?.value?.clearValidate();
  data.reconciliation = true;
};

// 返回
const back = () => {
  router.go(-1);
};

// 重新对账确认按钮
const emit = defineEmits(['clear-cache']);
const reSubmit = async () => {
  data.reconciliation = false;
  if (!recRuleFormRef.value || !recRuleFormRef1.value) return;
  try {
    await Promise.all([
      recRuleFormRef.value.validate(),
      recRuleFormRef1.value.validate(),
    ]);
  } catch (fields: any) {
    console.log(reRuleForm);

    for (const key in reRuleForm) {
      console.log(fields[key]);
      if (fields[key]) {
        recRuleFormRef.value.scrollToField(key);
        recRuleFormRef1.value.scrollToField(key);
        break;
      }
    }
    return;
  }

  if (reRuleForm.resultPayTime && reRuleForm.resultPayTime.length > 0) {
    reRuleForm.startDate = reRuleForm.resultPayTime[0]
      ? getDay(reRuleForm.resultPayTime[0])
      : '';
    reRuleForm.endDate = reRuleForm.resultPayTime[1]
      ? getDay(reRuleForm.resultPayTime[1])
      : '';
  } else {
    reRuleForm.startDate = '';
    reRuleForm.endDate = '';
  }

  const formData = new FormData();

  formData.append('type', data.detailData.type);
  formData.append('id', String(id));
  formData.append('file', dialogForm.file[0]);
  formData.append('startDate', reRuleForm.startDate);
  formData.append('endDate', reRuleForm.endDate);
  formData.append('operatorId', data.detailData.operatorId);
  formData.append('operatorName', data.detailData.operatorName);
  formData.append('channelId', window.localStorage.getItem('channelId') || '');
  formData.append('userId', window.localStorage.getItem('accountId') || '');

  reconciliationUpdate(formData).then((res: any) => {
    emit('clear-cache');
    back();
  });
};

// 弹窗取消
const hide = () => {
  data.dialogVisible = false;
  ruleFormRef.value?.clearValidate();
};

// 弹窗确认
const onSubmit = async () => {
  // ruleForm.id = data.dialogData.id;
  console.log(ruleForm);
  if (!ruleFormRef.value) return;
  try {
    await Promise.all([ruleFormRef.value.validate()]);
  } catch (fields: any) {
    for (const key in ruleForm) {
      if (fields[key]) {
        ruleFormRef.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  // ruleForm.resultPower = Number(ruleForm.resultPower);
  // ruleForm.resultAmount = Number(ruleForm.resultAmount);
  // ruleForm.resultPowerAmount = Number(ruleForm.resultPowerAmount);
  // ruleForm.resultServiceAmount = Number(ruleForm.resultServiceAmount);
  reconcilHandleDetail(ruleForm).then((res: any) => {
    data.dialogVisible = false;
    tableStationRef.value.getData();
  });
};

// 争议订单明细列表-表头信息
reconciliationOrderInfo({ id }).then((res: any) => {
  if (res) {
    data.detailData = res;
  } else {
    data.detailData = {};
  }
});

// 争议账单
const getData = (page: any, search: any) => {
  console.log(data.formData);
  const form = search.ruleForm;
  const tableData = Object.assign(form, { queryType: '0', id });
  // data.formData = Object.assign(data.formData, tableData);
  reconcilQueryDetailPage(tableData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        data.dataList = res.dataList;
        tableStationRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

// 平账账单
const getOrderData = (page: any, search: any) => {
  const form = search.ruleForm;
  const tableData = Object.assign(form, { queryType: '1', id });
  reconcilQueryDetailPage(tableData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getOrderData(page, search);
        return;
      }
      nextTick(() => {
        orderData.dataList = res.dataList;
        tableRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

// 字典
queryDicByParent({
  listDtos: [
    'recStatus',
    'reconciliationStatus',
    'recResult',
    'startChargeSeqStatus',
  ],
}).then((res: any) => {
  optionsS.resultData = [...res.recResult];
  optionsS.typeData = [...res.recStatus];
  optionsS.startChargeSeqStatusData = [...res.startChargeSeqStatus];
  data.query[1].props.options = [...res.recStatus];
  data.query[2].props.options = [...res.recResult];
  // plieData.columns[8].dic = [...res.OfflineAlarmStatus];
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';

.dispute-info {
  background: #c6e2ff;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin-top: 20px;
  border-radius: 8px;
  .info {
    display: flex;
  }
  .info-item1 {
    padding-top: 20px;
  }
  .info-item {
    font-size: 12px;
    line-height: 28px;
    margin: 0 20px;
    display: flex;
    // align-items: center;
    .dispute-title {
      width: 100px;
      // font-size: 14px;
      text-align: right;
    }
    .dispute-value {
      margin-left: 20px;
      // font-size: 14px;
    }

    .dispute-upload {
      background: #c6e2ff;
      margin-left: 20px;
    }
  }
  .icon-bianji,
  .icon-cuowuguanbiquxiao-xianxingyuankuang,
  .icon-baocun {
    color: var(--el-color-primary);
  }
  .card-edit {
    // position: absolute;
    // right: 5%;
    // top: 0;
    margin-right: 10px;
    font-size: 12px;
    cursor: pointer;
  }
  .card-save {
    display: flex;
    // position: absolute;
    // right: 5%;
    // top: 0;
    margin-right: 10px;
    cursor: pointer;
  }
  .icon-bianji,
  .icon-cuowuguanbiquxiao-xianxingyuankuang,
  .icon-baocun {
    font-size: 12px;
  }
  .icon-cuowuguanbiquxiao-xianxingyuankuang {
    margin-right: 10px;
  }
}
.tabs {
  display: flex;
  height: 32px;

  .tab-item {
    font-size: 13px;
    color: #5073f7;
    padding: 6px 16px;
    border: 1px solid #c4c4c4;
    border-left: 0;
    text-align: center;
    cursor: pointer;

    &:first-child {
      border-radius: 8px 0px 0px 8px;
      border-left: 1px solid #c4c4c4;
    }

    &:last-child {
      border-radius: 0px 8px 8px 0px;
    }
  }

  .active {
    background: #e5e8f6;
  }
}

.card {
  padding: 30px 0;
  margin: 20px 0;

  .card-content {
    width: 100%;

    .card-data {
      .card-item {
        display: flex;

        .title {
          margin-left: 12px;
        }

        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}

.line-card {
  margin: 0 12px;
  display: flex;
  justify-content: space-between;

  .right-card {
    width: 74%;
    height: 129px;
    background: linear-gradient(180deg, #5073f7 0%, #2e52db 100%);
    border-radius: 8px;
    padding: 10px 0;
    margin: 20px 0;
    color: #fff;

    .dividend-title {
      .title {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
      }
    }

    .charge-data {
      .charge-data-item {
        display: flex;
        justify-content: space-around;
        // text-align: center;
        // color: #262626;
        font-size: 12px;
        line-height: 20px;

        .charge-info {
          .title {
            width: 86px;
          }
        }
      }

      .charge-data-item1 {
        margin-top: 10px;
      }
    }
  }

  .left-card {
    width: 24%;
    height: 129px;
    background: linear-gradient(165.39deg, #d4dbf5 -17.51%, #a4b9ff 89.89%);
    border-radius: 8px;
    padding: 10px 0;
    margin: 20px 0;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 149px;
      background-image: url(@/assets/images/financial-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.2;
    }

    .dividend-title {
      .title {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
        // margin-bottom: 10px;
      }
    }

    .charge-info {
      color: #262626;
      font-size: 12px;
      line-height: 20px;
      margin: 10px 0;
      text-align: center;
    }
  }

  .right-card1 {
    width: 58%;
  }

  .left-card1 {
    width: 20%;
  }
}
.import-dialog {
  .icon-download {
    color: #5073f7;
    cursor: pointer;
  }
  .upload-demo {
    width: 100%;
  }
}
</style>
  